<template>
  <ul class="chart-pool">
    <li class="chart-item" v-for="(chart, index) in chartList" :key="index"
      :style="{ marginLeft: index % 2 != 0 ? '10px' : '18px' }">
      <div class="chart-content" draggable="true" @dragend='selectChart($event, chart.type, chart.antVData)'>
        <div class="img" :style="`background: url(${chart.url});background-size: cover`"></div>
        <!-- <img :src="chart.source" alt=""> -->
        <!-- <img :src="chartList.source.slice(4)" alt=""> -->
        <!-- <svg class="icon svg-icon" aria-hidden="true"> -->
        <!-- <use :xlink:href="`#${chart.icon}`"></use> -->
        <!-- </svg> -->
        <p>{{ chart.title }}</p>
        <!-- {{ chartList.title }} -->
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
// import { CHART_LIST } from '@/configs/chart'


export default defineComponent({
  name: 'chart-pool',
  emits: ['select'],
  props: {
    chartList: {
      type: Array,
      required: true,
    },

  },
  setup(props, { emit }) {
    // const chartList = CHART_LIST

    const selectChart = ($event: MouseEvent, chart: string, data: any) => {
      emit('select', { chart, data, $event })
    }

    return {
      // chartList,
      selectChart,
    }
  },
})
</script>

<style lang="scss" scoped>
ul.chart-pool {
  overflow: hidden;

  li {
    float: left;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    background: $lightGray;
    margin-left: 10px !important;
    color: $defaultIconColor;
    // padding: 18px 13px 0;
    // border-radius: 8px;

    p {
      text-align: center;
      padding: 5px 0 10px 0;
    }

    &:hover {
      cursor: move;
      color: white;

    }

    .icon {
      width: 100%;
      height: 60px;
      background-color: $defaultBlack;
    }
  }
}

// .chart-pool {

//   padding: 0 12px;
//   margin-bottom: -5px;

//   @include flex-grid-layout();
// }
// .chart-item {
//   @include flex-grid-layout-children(3, 32%);

//   height: 0;
//   padding-bottom: 32%;
//   flex-shrink: 0;
//   position: relative;
//   cursor: move;
// }
.chart-content {
  width: 100px;
  height: 80px;

  .img {
    width: 100px;
    height: 63px;
    background-size: cover;
  }
}
</style>